@import "../../public/style/pxtorem";
$radius: 6;

.video-card-container {
  display: inline-block;
  width: pxToRem(170);
  box-sizing: border-box;
  margin-bottom: pxToRem(16);

  .link-to-video {
    width: 100%;

    .img-container {
      position: relative;
      width: 100%;
      height: pxToRem(106);
      overflow: hidden;
      border-radius: pxToRem($radius);

      .img {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: pxToRem($radius);
      }

      .no-img-icon {
        width: 100%;
        height: 100%;
        background: linear-gradient(transparent 50%,rgba(0,0,0,.5));
        border-radius: pxToRem($radius);
      }

      .play-view-container {
        position: absolute;
        width: 100%;
        display: flex;
        bottom: 0;
        left: 0;
        color: #fff;
        z-index: 2;
        font-size: pxToRem(12);
        padding-left: pxToRem(8);
        line-height: pxToRem(20);
        //padding-bottom: pxToRem(3);
        background: linear-gradient(180deg,rgba(33,33,33,0),rgba(33,33,33,.5));
        box-sizing: border-box;
        border-radius: pxToRem($radius);

        & div:first-child {
          margin-right: pxToRem(24);
        }

        .text {
          margin-left: pxToRem(6);
        }

        .icon {
          width: pxToRem(16);
          height: pxToRem(16);
          vertical-align: pxToRem(-3);
        }
      }
    }
  }
  
  .title-container {
    width: 100%;
    height: pxToRem(32);
    overflow: hidden;
    font-size: pxToRem(14);
    color: #212121;
    text-align: left;
    margin-top: pxToRem(6);
    line-height: 1.2;
  }
}
